<template>
<view>
	<view>
    <tn-nav-bar alpha backTitle=""></tn-nav-bar>
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
  </view>

      <view class="title">
        <view>宠物档案</view>
				</view>
			</view>
			<view class="petinfo-container">
		
		<view class="avatar-area">
			<view class="avatar-circle">未录入</view>
			<view class="pet-nickname">小咪</view>
		</view>
		<view class="info-list">
			<view class="info-row">
				<view class="info-label">品种</view>
				<view class="info-value">银渐层</view>
			</view>
			<view class="info-row">
				<view class="info-label">性别</view>
				<view class="info-value">男生</view>
			</view>
			<view class="info-row">
				<view class="info-label">年龄</view>
				<view class="info-value">1岁</view>
			</view>
			<view class="info-row">
				<view class="info-label">体重</view>
				<view class="info-value">1kg</view>
			</view>
			<view class="info-row">
				<view class="info-label">生日</view>
				<view class="info-value">2024.12.21</view>
			</view>
			<view class="info-row">
				<view class="info-label">陪伴日期</view>
				<view class="info-value">220天</view>
			</view>
		</view>
		<button class="face-btn u-f-ajc" @click="goFace">面容录入</button>
	</view>
</view>

</template>

<script>
export default {
	methods: {
		goFace() {
			uni.redirectTo({
				url: '/pages/register/face/photo'
			})
		}
	}
}
</script>

<style scoped>
.title {
	font-size: 46rpx;
	font-weight: bold;
	margin-left: 32rpx;
	margin-bottom: 0rpx;
  margin-top: 32rpx;
	color: #111;
}
.petinfo-container {

	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 0 40rpx 0;
}
.avatar-area {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 48rpx;
	margin-bottom: 32rpx;
}
.avatar-circle {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	background: #f5f5f5;
	color: #888;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	margin-bottom: 18rpx;
}
.pet-nickname {
	font-size: 32rpx;
	color: #111;
	font-weight: 500;
	margin-bottom: 18rpx;
}
.info-list {
	width: 90vw;
	max-width: 600rpx;
	margin: 0 auto 60rpx auto;
}
.info-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 28rpx 0;
}
.info-label {
	color: #bbb;
	font-size: 26rpx;
}
.info-value {
	color: #111;
	font-size: 28rpx;
	font-weight: 500;
}
.face-btn {
	width: 90vw;
	max-width: 600rpx;
	height: 88rpx;
	background: #000;
	color: #fff;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: bold;
	border: none;
	margin-top: 60rpx;
	letter-spacing: 2rpx;
}
</style>